<template>
<div>
	<div class="bigtitle">
		<div class="bigtitle-title">商品评价</div>
	</div>

	<div v-if="canShow" v-for="(item, index) in items" :key="index" pd2 bdb-gray4>
		<p lh1 long>
			<span left bg-cover bd-gray3 bd-circle h1 w1 mgr2 :style="{'background-image':`url(${memberMap[item.userId].head})`}"></span>
			<span mgr2>{{memberMap[item.userId].userName}}</span>
			<span gray3 mgr2>{{formatTimeStr(item.creationTime)}}</span>
			<span v-if="item.orderNumber" mgr2>订单号：{{item.orderNumber}}</span>
			<Rate v-if="item.orderNumber" v-model="item.rateValue" disabled />
			<Button icon="ios-trash-outline" size="small" type="text" linkable right sz2 @click="handleDelete(item.id)"></Button>
		</p>
		<div v-html="item.content" mgt2></div>
		<div mgt2>
			<span v-for="(pic, index2) in item.pictures" :key="index2" inline-block bg-cover bd-gray4 h3 w3 mgr2 
				:style="{'background-image':`url(${pic})`}" linkable @click="viewPicture(pic)"></span>
		</div>
	</div>

    <AutoPage :value="page" :auto="false" text-right mgt2></AutoPage>
</div>
</template>

<script lang="ts">
import { Component, Vue,Inject, Prop,Watch } from 'vue-property-decorator';
import AbpBase from '../../lib/abpbase'
import AutoPage from '@common/components/AutoPage';

@Component({
    components: { AutoPage }
})
export default class CommodityEvaluation extends AbpBase{
	canShow:Boolean = false;
	get memberMap() {
		return this.$store.state.member.memberMap;
	}
	get page() {
		return this.$store.state.self.commodityEvaluationsPage;
	}
	get items() {
		return this.page.items;
	}
	handleDelete(id) {
		this.confirm("确定要删除该评论吗？", () => {
			this.post('OrderEvaluate/MemberDeleteEvaluate', { id: id });
		});
	}
	created() {
		this.page.getData(async () => {
			await this.$store.dispatch('member/getMemberProfiles', this.page.items.map(elem => elem.userId));
			this.canShow = true;
		});
	}
}
</script>
